<template>
  <div>
    <div
      id="myChart"
      :style="{ width: '100%', height: '500px', backgroundColor: '#ffffffd9' }"
    ></div>
    <strong style="color: mediumblue"
      >欢迎你！亲爱的{{ userInfo.name }}，今天是你使用本系统的第{{
        count
      }}天，祝你工作顺利~</strong
    >
  </div>
</template>

<script>
export default {
  name: "Index",
  // props: {
  //   userName: String,
  // },
  mounted() {
    this.drowTree();
  },
  created() {},
  data() {
    return {
      data:{        
        name: "进行中的目标",
        children: [],
      }
    };
  },
  computed: {
    userInfo: {
      get() {
        return this.$store.state.userInfo.info;
      },
    },
    count: {
      get() {
        var date1_ms = new Date(this.userInfo.createTime);
        var date2_ms = new Date();
        var timeDiff = Math.abs(date1_ms - date2_ms);
        return Math.ceil(timeDiff / (1000 * 3600 * 24));
        // return 1;
      },
    },
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      const myChart1 = this.$echarts.init(document.getElementById("myChart1"));
      const myChart2 = this.$echarts.init(document.getElementById("myChart2"));
      myChart1.setOption({
        title: {
          // text: 'Rainfall vs Evaporation',
          subtext: "部门OKR",
        },
        tooltip: {
          trigger: "axis",
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            // prettier-ignore
            data: ['技术部', '人事部', '策划部', '运营部', '美工部', '财务部'],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "完成个数",
            type: "bar",
            data: [10, 20, 4, 3, 5, 3],
            markPoint: {
              data: [
                { type: "max", name: "Max" },
                { type: "min", name: "Min" },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "Avg" }],
            },
          },
          {
            name: "制定个数",
            type: "bar",
            data: [15, 25, 6, 7, 10, 9],
            markPoint: {
              data: [
                { type: "max", name: "Max" },
                { type: "min", name: "Min" },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "Avg" }],
            },
          },
        ],
      });
      myChart2.setOption({
        title: {
          // text: 'Rainfall vs Evaporation',
          subtext: "个人OKR",
        },
        tooltip: {
          trigger: "axis",
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            // prettier-ignore
            data: ['张三', '李四', '王五', '赵六', '孙七'],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "完成个数",
            type: "bar",
            data: [10, 20, 4, 0, 5],
            markPoint: {
              data: [
                { type: "max", name: "Max" },
                { type: "min", name: "Min" },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "Avg" }],
            },
          },
        ],
      });
    },
    async drowTree() {
      const myChart = this.$echarts.init(document.getElementById("myChart"));
      await this.$axios.get("/objective/tree").then((res) => {
        // console.log(res.data.data);
        this.data.children = res.data.data;
      });
      let option = {
        title: {
          text: "目标总览",
        },
        tooltip: {
          trigger: "item",
          triggerOn: "mousemove",
        },
        textStyle: {
          fontSize: 15,
        },
        series: [
          {
            type: "tree",
            id: 0,
            name: "tree1",
            data: [this.data],
            top: "10%",
            left: "20%",
            bottom: "22%",
            right: "20%",
            symbolSize: 7,
            edgeShape: "polyline",
            edgeForkPosition: "63%",
            initialTreeDepth: 3,
            lineStyle: {
              width: 2,
            },
            label: {
              backgroundColor: "#fff",
              position: "left",
              verticalAlign: "middle",
              align: "right",
            },
            leaves: {
              label: {
                position: "right",
                verticalAlign: "middle",
                align: "left",
              },
            },
            emphasis: {
              focus: "descendant",
            },
            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750,
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>
<style scoped>
.card {
  font-weight: bold;
  width: 100%;
  height: auto;
}
.el-row {
  margin-bottom: 20px;
}
</style>